<app-header-main #header [active]="page"></app-header-main>
<div class="demo-page">
  <div
    class="task-scheduling-panel"
    style="height: 100%; width: 100%;"
    [ngClass]="{'editor-disactive': !activeEditor}">
    <as-split
      #splitH
      direction="horizontal"
      (dragEnd)="handleGutterEnd($event, 'left')"
      (dragStart)="handleGutterStart($event)">
      <as-split-area [size]="leftSpliterSize">
        <as-split direction="vertical" style="width:100%">
          <as-split-area class="as-split-area-left">
            <app-insert-panels
              #insertPanel
              [onClick]="handleInsertPanelsClick"
              [onNodeShapeClick]="handleNodeShapeClick"
              [onNodeShapeDragStart]="handleNodeShapeDragStart"
              [onNodeShapeDragEnd]="handleNodeShapeDragEnd"
              [regFlowUnitPanel]="regFlowUnitPanel"
              [dirs]="dirs"
              [optionsdevice]="toolBar.optionsdevice"
              (refreshEmmitter)="refreshFlowunit($event)"
              (deviceTypeEmmitter)="updateDeviceType($event)">
            </app-insert-panels>
          </as-split-area>
        </as-split>
      </as-split-area>
      <as-split-area [size]="100 - leftSpliterSize" class="main-container-body">
        <as-split
          #splitV
          direction="vertical"
          (dragEnd)="handleGutterEnd($event, 'center')"
          (dragStart)="handleGutterStart($event)"
          gutterDblClickDuration="500">
          <as-split-area [size]="centerSplitterSize" style="overflow:hidden">
            <app-tool-bar
              #toolBar
              [hasUndo]="hasUndo"
              [hasRedo]="hasRedo"
              [graphs]="graphs"
              [msgs]="msgs"
              [statusGraph]="statusGraph"
              [onUndoButtonClick]="handleUndoButtonClick"
              [onRedoButtonClick]="handleRedoButtonClick"
              [onZoomInButtonClick]="handleZoomInButtonClick"
              [onZoomOutButtonClick]="handleZoomOutButtonClick"
              [onZoomResetButtonClick]="handleZoomResetButtonClick"
              [onZoomFitButtonClick]="handleZoomFitButtonClick"
              [onConfirmNameChange]="handleSaveAsToBrowser.bind(this)"
              [onNewButtonClick]="handleNewClick.bind(this)"
              [onRunButtonClick]="handleRunButtonClick"
              [onStopButtonClick]="handleStopButtonClick"
              [onRestartButtonClick]="handleRestartButtonClick"
              [onSwitchDirectionButtonClick]="handleSwitchDirectionButtonClick"
              [onCreateProjectButtonClick]="createProject"
              [showGraphSettingDialog]="showGraphSettingDialog.bind(this)"
              [showGraphSelectDialog]="showGraphSelectDialog.bind(this)"
              [showSelectDialog]="showGraphSelectDialog.bind(this)"
              [showSolutionDialog]="showSolutionDialog.bind(this)"
              [showCreateProjectDialog]="showCreateProjectDialog.bind(this)"
              [showOpenProjectButtonDialog]="showOpenProjectButtonDialog.bind(this)"
              [showCreateFlowunitDialog]="showCreateFlowunitDialog.bind(this)"
              (openDialogEmmitter)="openDialog()"
              (graphsEmmitter)="getToolBarGraphsChange($event)"
              (refreshEmmitter)="refreshFlowunit($event)"
              (dotSrcEmmitter)="dotSrcUpdate($event)"
              (flowunitEmmitter)="updateDir($event)"
              (projectPathEmmitter)="updateProjectPath($event)"
              (saveProjectEmmitter)="saveCurrentProject()"
              (saveSettingEmmitter)="saveSettingOnNewGraph($event)"
              (saveGraphEmmitter)="handleSaveAsToBrowser($event)"
              (removeLabelEmmitter)="removeDotSrcLabel()"
              (downloadGraphEmmitter)="downloadGraph()"
              (setGraphStatusEmmitter)="setStatusGraph($event)"
              (projectEmmitter)="updateProject($event)"
              (getGraphFileTimeEmmitter)="getGraphFileTime($event)"
              (startTimerGetGraphFileNameEmmitter)="startTimerGetGraphFileName($event,null,null,null)"
              (isAttrExistEmmitter)="isAttrExist()">
            </app-tool-bar>

            <div style="flex: 2;" class="graph">
              <app-graph
                #graph
                style="z-index:-100"
                [dotSrc]="dotSrc"
                [msgs]="msgs"
                [hasFocus]="focusedPane === 'Graph'"
                [onUndo]="handleUndoButtonClick"
                [onRedo]="handleRedoButtonClick"
                [onError]="handleError"
                [onFocus]="handleGraphFocus"
                [onSelect]="handleGraphComponentSelect"
                [onTextChange]="handleTextChange"
                [onInitialized]="handleGraphInitialized"
                [onNodeAttributeChange]="handleNodeAttributeChange"
                [registerGetSvg]="registerGetSvg"
                [registerNodeShapeClick]="registerNodeShapeClick"
                [registerNodeShapeDragStart]="registerNodeShapeDragStart"
                [registerNodeShapeDragEnd]="registerNodeShapeDragEnd"
                [registerZoomInButtonClick]="registerZoomInButtonClick"
                [registerZoomOutButtonClick]="registerZoomOutButtonClick"
                [registerZoomFitButtonClick]="registerZoomFitButtonClick"
                [registerZoomResetButtonClick]="registerZoomResetButtonClick"
                [registerNodeAttributeChange]="registerNodeAttributeChange"
                [isResizing]="isResizing"
                (sendIsOpen)="updateIsOpen($event)"
                (searchTypeByNameOfCategories)="searchTypeByNameOfCategories($event)">
              </app-graph>
            </div>
          </as-split-area>
          <as-split-area [size]="100-centerSplitterSize">
            <app-text-editor
              #textEditor
              [dotSrc]="dotSrc"
              [onTextChange]="handleTextChange"
              [onFocus]="handleTextEditorFocus"
              [onBlur]="handleTextEditorBlur"
              [error]="error"
              [selectedGraphComponents]="selectedGraphComponents"
              [holdOff]="holdOff"
              [fontSize]="fontSize"
              [registerUndo]="registerUndo"
              [registerRedo]="registerRedo"
              [registerUndoReset]="registerUndoReset"
              [registerResize]="registerEditorResize"
              [registerSwitchDirectionButtonClick]="registerSwitchDirectionButtonClick">
            </app-text-editor>
          </as-split-area>
        </as-split>
      </as-split-area>
    </as-split>
  </div>
  <div>
    <app-attribute-panel
      style="z-index:5"
      id="attribute"
      #attribute
      class="half-drawer"
      *ngIf="currentComponent"
      [config]="currentComponent"
      [onNodeAttributeChange]="handleNodeAttributeChange"
      (newItemEvent)="updateConfig($event)"
      [dotGraph]="graph.dotGraph">
    </app-attribute-panel>
  </div>
</div>
<d-toast 
  [value]="msgs" 
  [style]="{ top: '100px' }">
</d-toast>
<ng-template #modalGuideMain id='modalGuideMain' let-context='context'>
  <div class="flex-center" style="margin-top:10px">
    <d-button 
      bsStyle="primary" 
      [bordered]="true" 
      style="margin-right: 8px"
      (btnClick)="mainGuideCreateProject()"
      >
      {{ 'toolBar.newButton' | translate }}
    </d-button>
    <d-button 
      bsStyle="primary" 
      [bordered]="true" 
      style="margin-right: 8px"
      (btnClick)="mainGuideOpenProject()"
      >
      {{ 'toolBar.openProjectButton' | translate }}
    </d-button>
  </div>
</ng-template>
<ng-template #modalBat id='modalBat' let-context='context'>
  <div>
    <div>
      <p style="width:50px">IP：</p>
      <input 
        style="width:240px"
        dTextInput 
        placeholder="Please Enter" 
        id="textInput" 
        [(ngModel)]="ipAddress"/>
    </div>
    <br>
    <div>
      <p style="width:50px">{{ 'port' | translate}}</p>
      <input 
        style="width:240px;display:inline-block"
        dTextInput 
        placeholder="Please Enter" 
        id="textInput" 
        [(ngModel)]="portAddress"/>
      <div
        style="display:inline-block; margin-left:10px"
        bsStyle="common"
        dPopover
        [popType]="'default'"
        [content]="'message.containerSituationPleaseInputHostMapPort' | translate"
        [position]="'top'"
        [controlled]="true"
        [appendToBody]="false"
        [trigger]="'hover'"
        >
        <i 
          class="icon icon-info-o">
        </i>
      </div>
    </div>
  </div>
  
</ng-template>
<ng-template #customTemplate let-msg="msg">
  <div>
    <div>
      {{msg.errorMsg}}
    </div>
  </div>
</ng-template>
